<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/12/16
  Time: 15:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
<style>
    /* 统一板块宽度和左右居中 */

    .banner_con,
    .news_con,
    .case_con,
    .links_con,
    .footer_con {
        width: 1002px;
        margin: 0 auto;
    }

    #banner {
        height: 465px;
    }

    #banner .banner_con {
        height: 465px;
        /* background: pink; */
        margin: 0 auto;
    }

    .news_con {
        height: 243px;
        background: white;
    }

    .news_title {
        /* background: cadetblue; */
        font-size: 18px;
        color: #3f434f;
        line-height: 18px;
        padding-top: 36px;
    }

    .news_list {
        /* background: cornflowerblue; */
        margin-top: 23px;
    }

    .news_list li {
        width: 437px;
        height: 25px;
        padding-left: 14px;
        /* margin-top: 23px;不能给li加哦 要给他爹，不然每个儿子顶部都会空出来*/
    }

    .news_list li a {
        float: left;
        font-size: 12px;
        color: #565656;
        line-height: 25px;
    }

    .news_list li span {
        float: right;
        color: #9a9a9a;
        font-size: 12px;
    }

    .news_l {
        width: 480px;
        height: 243px;
        /* background: rebeccapurple; */
        float: left;
        padding-left: 21px;
    }

    .news_c {
        width: 194px;
        height: 243px;
        background: #f1f1f1;
        float: left;
        padding: 0 27px 0 20px;
    }

    .news_c .txt1 {
        font-size: 12px;
        color: #555555;
        line-height: 25px;
        margin-top: 34px;
        /* 行高自己去量哦 */
    }

    .news_c .txt2 {
        font-size: 12px;
        color: #979797;
        line-height: 25px;
        margin-top: 15px;
        /* 行高自己去量哦 */
    }

    .news_r {
        width: 180px;
        height: 243px;
        float: left;
        padding: 0 38px 0 24px;
    }

    .news_r .txt3 {
        font-size: 12px;
        color: #585858;
        line-height: 24px;
        margin: 21px 0 22px 0;
    }

    .test {

    }

    .case_con {
        height: 650px;
        /* background: goldenrod; */
    }

    .case_con h3 {
        font-size: 18px;
        color: #3f434f;
        /* background: pink; */
        padding: 28px 0 18px 22px;
    }

    .case_con .case_box {
        height: 100%;

        /* background: orange; */
    }

    .case_box dl {
        width: 210px;
        /* 这是由图片尺寸为210得出的，这样文本就会屈居于一处 */
        /* background: burlywood; */
        float: left;
        margin: 0 20px;
        background-color: rgba(252, 252, 252, 0.5);
    }


    /* 这里很重要！一定要设置宽高，也就是图片尺寸得出，这样以后图片更换，结构就不会乱！ */

    .case_box dl dt {
        width: 210px;
        height: 136px;
    }

    .case_box dl dd {
        font-size: 12px;
        color: #4f4f4f;
        line-height: 24px;
        margin-top: 13px;
    }


    /* 上面给dt这个容器指定了宽高，现在让img跟随这个容器的宽高！！ */
    .case_box dl dt img {
        width: 100%;
        height: 100%;
    }

    #links {
        background: #e5e5e5;
    }

    .links_con {
        height: 150px;
        /*   */
    }

    .links_con .links_title {
        color: #5d5d5d;
        line-height: 16px;
        border-bottom: 1px solid #c1c1c1;
        padding: 31px 0 11px 13px;
    }

    .links_con .links_l {
        width: 452px;
        height: 100px;
        background: #e5e5e5;
        float: left;
        margin-left: 20px;
    }

    .links_con .links_list {
        /* background: cornsilk; */
        height: 100px;
        padding-left: 5px;
        padding-top: 15px;
    }

    .links_con .links_list li {
        width: 136px;
        height: 24px;
        font-size: 12px;
        line-height: 24px;
        padding-left: 13px;
        float: left;
    }

    .links_con .links_list li a {
        color: #5f5f5f;
    }

    .links_con .links_c {
        width: 153px;
        height: 100px;
        background: #e5e5e5;
        float: left;
        margin: 0 50px;
    }

    .links_con .links_c .links_list li {
        width: 130px;
    }

    .links_con .links_r {
        width: 256px;
        height: 100px;
        background: #e5e5e5;
        float: left;
    }

    .links_con .links_r .map {
        text-align: center;
        padding-top: 11px;
    }

    .case_con_footBoxLine {
        width: 100px;
        margin: auto 45%;
    }

    .case_con_footLine {
        text-align: center;
    }


    /*--------------------------------------------------------------------------------------------------------------
     *banner
     */
    .navigation {
        height: 100px;
        /*background-color: #e5e5e5;*/
        margin-top: -10px;
        margin-left: -10px;
        margin-right: -10px;
        padding: 20px 30px 0px 30px;
        display: flex;
    }

    .navigationAvatar {
        width: 15%;
        height: 100%;
        display: flex;
        /*margin: 10px;*/
        /*border: 3px black dotted;*/
    }

    .navigationInfromation {
        width: 85%;
        /*border: 3px black dotted;*/
        display: flex;
        justify-content:center;
        align-items: center;
    }

    .navigationItem {
        display: flex;
        /*border: 3px black dotted;*/
        justify-content:center;
        align-items: center;
    }

    .navigationContentOne {
        width: 70%;
    }

    .navigationContentTwo {
        width: 30%;
        font-family: 楷体;
        font-weight: bolder;
    }

    .navigationInfromationTitle {
        display: flex;
        color: rgba(30,30,30,0.9);
        font-family: 仿宋;
        font-weight: bolder;
        font-size: 60px;
        text-align: center;
    }

    .navigationNapeNormal {
    }

    .feet {
        height: 100px;
        background-color: rgb(19, 59, 113);
        margin-top: -10px;
        margin-left: -10px;
        margin-right: -10px;
        padding: 15px;
        display: flex;
    }
</style>
</head>
<body>

<div class="navigation">
    <img class="navigationAvatar" src=""/>
    <div class="navigationInfromation">
        <div class="navigationItem navigationContentOne">
            <div class="navigationInfromationTitle">
                图书馆管理系统
            </div>
        </div>
        <div class="navigationItem navigationContentTwo">
            <c:out value="你好:${user.fullName}"/><br/>

            <c:out value="账号身份:${user.role}"/><br/>
            欢迎使用图书馆管理系统
            <a href="<c:url value="/logout" />">注销</a>

        </div>
    </div>
</div>
</body>
</html>
